<template>
	<div style="margin-top: 15px" class="search_box">
		<el-input
			placeholder="请输入内容"
			class="input-with-select"
			v-model="query"
			v-on:input="check"
		>
			<el-button
				slot="append"
				icon="el-icon-search"
				class="ordinary"
			></el-button>
		</el-input>
		<el-row>
			<el-button type="primary" plain autofocus @click="add">
				添加用户</el-button
			>
			<!-- 添加用户组件 -->
			<Dialog :start="$store.state.Users.addUser">
				<template>
					<Verifications />
				</template>
			</Dialog>
		</el-row>
	</div>
</template>

<script>
import Verifications from './Verifications.vue'
import Dialog from './Dialog.vue'
export default {
	name: 'Search',
	components: {
		Dialog,
		Verifications,
	},
	data() {
		return {
			query: '',
		}
	},
	methods: {
		check() {
			this.$bus.$emit('check', this.query)
		},
		add() {
			this.$store.commit('Users/Add')
		},
	},
}
</script>
<style scoped>
.search_box {
	margin-top: 0 !important;
	display: flex;
	flex-direction: row;
	margin-bottom: 18px;
}
.el-input-group {
	width: 35%;
}
.el-row .el-button {
	margin-left: 50px;
}
.ordinary {
	cursor: default;
}
</style>
